<template>
  <div class="input-container no-drag">
    <div class="operator">
      <ul class="operator-left">
        <li>
          <i class="iconfont icon-biaoqing" style="font-size: 20px"></i>
        </li>
        <li>
          <i class="iconfont icon-shoucang" style="font-size: 24px"></i>
        </li>
        <li>
          <i class="iconfont icon-wenjian" style="font-size: 22px"></i>
        </li>
        <li>
          <i class="iconfont icon-jietu" style="font-size: 24px"></i>
        </li>
        <li>
          <i class="iconfont icon-chat" style="font-size: 18px"></i>
        </li>
      </ul>

      <ul class="operator-right">
        <li @click="handleAudioCall" title="语音通话">
          <el-icon class="icon">
            <Phone />
          </el-icon>
        </li>
        <li @click="handleVideoCall" title="视频通话">
          <el-icon class="icon">
            <VideoCamera />
          </el-icon>
        </li>
      </ul>
    </div>

    <el-input resize="none" class="input" v-model="message" type="textarea" @keydown.enter="handleKeyDown"></el-input>

    <div class="footer">
      <el-button style="background-color: rgb(7, 193, 96);" type="success" @click="handleSend" :disabled="!message">发送(S)</el-button>
    </div>


  </div>
</template>


<script setup>
import { Phone, VideoCamera } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useChatStore } from '@/stores/chat'
import ws from '@/webSocket'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const chatStore = useChatStore()


// 定义 props 和 emits
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const message = ref("")
const userStore = useUserStore()

// 发送消息
const handleSend = () => {
  if (message.value.trim()) {
    const reqObj = {
      type: 1,
      status: 1,
      isRead: 0,
      content: message.value.trim(),
      contactId: chatStore.currentChat.contactId,
      sessionId: chatStore.currentChat.sessionId,
      createUser: userStore.uid,
      createTime: Date.now()
    }
    ws.sendMessage(reqObj)
    message.value = ''
  }
}

// 键盘事件处理
const handleKeyDown = (event) => {
  // 按下 Enter 键且没有按住 Shift 键时发送消息
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault() // 阻止默认的换行行为
    handleSend()
  }
  // 按下 Shift + Enter 时允许换行（默认行为）
}

// 发起语音通话
const handleAudioCall = async () => {
  if (!chatStore.currentChat || !chatStore.currentSessionId) {
    ElMessage.warning('请先选择聊天对象')
    return
  }

  console.log(chatStore.currentChat)
  const reqObj = { type: 'audio' ,
    targetUserId: chatStore.currentChat.contactId ,
    sessionId: chatStore.currentSessionId }
  try {
    ws.sendNotice({type: 'call' , method: 'start' , data: reqObj })
    window.ipcRenderer.send('call' , reqObj)
  } catch (error) {
    console.error('发起语音通话失败:', error)
    ElMessage.error('发起语音通话失败')
  }
}

// 发起视频通话
const handleVideoCall = async () => {
  if (!chatStore.currentChat || !chatStore.currentSessionId) {
    ElMessage.warning('请先选择聊天对象')
    return
  }

  try {
    window.ipcRenderer.send('call' , {
      type: 'video' ,
      targetUserId: chatStore.currentChat.contactId ,
      sessionId: chatStore.currentSessionId,
    })
  } catch (error) {
    console.error('发起视频通话失败:', error)
    ElMessage.error('发起视频通话失败')
  }
}


</script>


<style scoped lang="less">
.input-container {
  width: 100%;
  height: 100%;
  border-top: none;
  //background-color: red;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;

  .operator {
    display: flex;
    justify-content: space-between;


    li:hover {
      background-color: rgb(224, 224, 224);
    }

    .operator-left {
      color: black;
      display: flex;

      li {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
      }


    }

    .operator-right {
      display: flex;


      li {
        width: 30px;
        height: 30px;
        font-size: 20px;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 5px;
      }
    }
  }


  .input {
    flex: 1;
    border: none;
    color: black;


    :deep(.el-textarea__inner) {
      height: 100%;
      background-color: rgb(237, 237, 237);
      border: none !important;
      box-shadow: none !important;
      padding: 5px 5px;
      color: black;
      resize: none;
    }
  }


  .footer {
    height: 55px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

}
</style>
